<template>
  <div class="addBanner">
    <div class="top">
      <el-button :class="{btn:current ===1}" @click="dynaBanner">视频轮播</el-button>
      <el-button :class="{btn:current ===2}" @click="shopBanner">商城轮播</el-button>
    </div>
    <div class="sectionOne">
      <el-row>
        <el-col :span="20">
          <div class="grid-content bg-purple">
            <span style="padding:15px 15px 0;color:#333333;font-size:18px">首页轮播图管理</span>建议尺寸：300*300px
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-light" style="text-align: right">
            <el-button
              style="width:87px;background-color: #1BA687;color:#ffffff"
              size="small"
              @click="addBanner"
            >
              添加
            </el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="sectionTwo">
      <el-row class="first">
        <el-col :span="2"><div class="grid-content bg-purple-dark">序号</div></el-col>
        <el-col :span="5"><div class="grid-content bg-purple-dark">图片</div></el-col>
        <el-col :span="9"><div class="grid-content bg-purple-dark">详情链接</div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-dark">排序</div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-dark">操作</div></el-col>
      </el-row>
      <el-row class="second" v-for="(item,index) in bannerList" :key="index">
        <el-col :span="2">
          <div class="grid-content bg-purple-dark">{{index}}</div>
        </el-col>
        <el-col :span="5">
          <div class="grid-content bg-purple-dark img">
            <p class="cover">
              <i class="el-icon-picture"></i>
              <label class="upload">
                <input type="file" @change="getImg(index,$event)">
              </label>
              <img :src="item.image" alt="">
            </p>
          </div>
        </el-col>
        <el-col :span="9">
          <div class="grid-content bg-purple-dark detailLink">
            <el-input
              v-model="item.link"
              size="mini"
              style="width:336px"
              @blur="uploadLink(index,$event)"
            >
            </el-input>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-dark sort">
            <el-input
              v-model="item.sort"
              size="mini"
              :value="item.link"
              style="width:102px"
              @blur="uploadSort(index,$event)"
            >
            </el-input>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-dark">
            <el-button
              type="info"
              size="small"
              style="width:70px;height:34px;background-color: #2B333E"
              @click="delBanner(index)"
            >
              删除
            </el-button>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getDynaBanner, getShopBanner, delShopBanner, addDynaBanner, addShopBanner, deleteDynamic } from '@/api/add-mng'
import { fileUpload } from '@/api/file'
export default {
  name: 'AddBanner',
  data() {
    return {
      bannerList: [],
      // pictureCover: '',
      current: 1
    }
  },
  mounted() {
    this.getDynaBanner();
  },
  methods: {
    getDynaBanner() {
      getDynaBanner().then(res => {
        this.bannerList = res.data;
      })
    },
    getShopBanner() {
      getShopBanner().then(res => {
        this.bannerList = res.data;
      })
    },
    addBanner() {
      if (this.current === 1) {
        addDynaBanner({
          sort: 1,
          image: '1.jpg',
          link: ''
        }).then(res => {
          if (res.code === 200) {
            this.getDynaBanner();
          }
        })
      } else {
        addShopBanner({
          sort: 1,
          image: '1.jpg',
          link: ''
        }).then(res => {
          if (res.code === 200) {
            this.getShopBanner();
          }
        })
      }
    },
    dynaBanner() {
      this.getDynaBanner();
      this.current = 1;
    },
    shopBanner() {
      this.getShopBanner();
      this.current = 2;
    },
    delBanner(id) {
      if (this.current === 1) {
        deleteDynamic({
          id
        }).then((res) => {
          if (res.code === 200) {
            this.getDynaBanner();
          }
        })
      } else {
        delShopBanner({
          id
        }).then((res) => {
          if (res.code === 200) {
            this.getShopBanner();
          }
        })
      }
    },
    getImg(id,e) {
      const file = e.target.files[0];
      const formData = new FormData();
      formData.append('files', file);
      fileUpload(formData).then((res) => {
        if (this.current === 1) {
          addDynaBanner({
            id,
            image: res.data.files
          }).then(res => {
            if (res.code === 200) {
              this.$message({
                message: '上传成功',
                type: 'success'
              });
              this.getDynaBanner();
            }
          })
        } else {
          addShopBanner({
            id,
            image: res.data.files
          }).then(res => {
            if (res.code === 200) {
              this.$message({
                message: '上传成功',
                type: 'success'
              });
              this.getShopBanner();
            }
          })
        }
      })
    },
    uploadLink(id, e) {
      if (this.current === 1) {
        addDynaBanner({
          id,
          link: e.target.value
        }).then(res => {
          if (res.code === 200) {
            this.$message({
              message: '上传成功',
              type: 'success'
            });
            this.getDynaBanner();
          }
        })
      } else {
        addShopBanner({
          id,
          link: e.target.value
        }).then(res => {
          if (res.code === 200) {
            this.$message({
              message: '上传成功',
              type: 'success'
            });
            this.getShopBanner();
          }
        })
      }
    },
    uploadSort(id, e) {
      if (this.current === 1) {
        addDynaBanner({
          id,
          sort: e.target.value
        }).then(res => {
          if (res.code === 200) {
            this.$message({
              message: '上传成功',
              type: 'success'
            });
            this.getDynaBanner();
          }
        })
      } else {
        addShopBanner({
          id,
          sort: e.target.value
        }).then(res => {
          if (res.code === 200) {
            this.$message({
              message: '上传成功',
              type: 'success'
            });
            this.getShopBanner();
          }
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
  .addBanner{
    margin-top:20px;
    margin-left:20px;
    .top{
      color:#ffffff;
      .btn{
        background-color: #409EFF;
        color:#ffffff;
      }
    }
    .sectionOne{
      width:99%;
      margin-top:20px;
      color:#E51C23;
      font-size:14px;

    }
    .sectionTwo{
      width:99%;
      margin-top:20px;
      .grid-content{
        border:1px solid #DDDDDD;
      }
      .first{
        line-height:30px;
        background-color: #F5F5F5;
        font-size: 14px;
        text-align: center;
      }
      .second{
        height:100px;
        line-height:100px;
        background-color: rgba(248, 248, 248, 1);
        text-align: center;
        .img{
          .cover{
            position:relative;
            width: 138px;
            line-height: 79px;
            margin:10px auto;
            text-align:center;
            background-color: #eeeeee;
            .el-icon-picture{
              font-size: 15px;
              color: #8c939d;
            }
            .upload{
              position:absolute;
              top:0;
              left:0;
              width:100%;
              height:100%;
              z-index: 10;
              input{
                position:absolute;
                top:0;
                left:0;
                width:100%;
                height:100%;
                opacity: 0;
              }
            }

            img{
              position:absolute;
              top:0;
              left:0;
              width:100%;
              height:100%;
            }
          }

        }
        .detailLink{
          height:102px;
        }
        .sort{
          height:102px;
        }
      }
    }
  }
</style>
